<template>
  <div>
    <yx-header></yx-header>
    <div class="tm-par">
      <vue-baberrage
          :boxWidth="boxWidth"
          :boxHeight="boxHeight"
          :isShow="barrageIsShow"
          :barrageList="barrageList"
          :loop="barrageLoop">
      </vue-baberrage>

      <div class="prize-p">
        <div class="pp-list pp-list1">
          <div class="pp-list-item" v-for="(item,index) in ppList1" :key="index">
            <h1>{{item.title}}</h1>
            <p>≈ {{item.price}} ${{item.bz}}</p>
          </div>
        </div>
        <div class="pp-list pp-list2">
          <div class="pp-list-item" v-for="(item,index) in ppList2" :key="index">
            <h1>{{item.title}}</h1>
            <p>≈ {{item.price}} ${{item.bz}}</p>
          </div>
        </div>
        <div class="pp-list pp-list3">
          <div class="pp-list-item" v-for="(item,index) in ppList3" :key="index">
            <h1>{{item.title}}</h1>
            <p>≈ {{item.price}} ${{item.bz}}</p>
          </div>
        </div>
        <div class="pp-list pp-list4">
          <div class="pp-list-item" @click="dialogPpList = true">
            <h1>6个NFT兑换2.4%奖金池 X 5</h1>
            <p>≈ 99.99 $NHR</p>
          </div>
        </div>
      </div>
    </div>

    <yx-footer></yx-footer>


    <el-dialog
        title="集齐6个NFT的奖项"
        :visible.sync="dialogPpList"
        top="30vh"
        width="800px"
        class="el-dialog-mint"
        :before-close="closePpList">
      <div class="el-dialog-con">
        <div class="el-dialog-title">Mint NFT1</div>
        <div class="pp-list pp-list3">
          <div class="pp-list-item" v-for="(item,index) in ppList4" :key="index">
            <h1>{{item.title}}</h1>
            <p>≈ {{item.price}} ${{item.bz}}</p>
          </div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import yxHeader from './pageComponents/yx_header'
import yxFooter from './pageComponents/yx_footer'

import { MESSAGE_TYPE } from 'vue-baberrage';
import {mapState} from "vuex";

export default {
  name: 'index',
  components: {
    yxHeader,
    yxFooter,
  },
  data() {
    return {
      dialogPpList:false,
      msg: '~',
      barrageIsShow: true,
      messageHeight: 3,
      boxWidth: 1200,
      boxHeight: 180,
      barrageLoop: true,
      maxWordCount: 3,
      throttleGap: 2000,
      barrageList: [],
      ppList1:[
        {
          id:11,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'集齐108将兑换50%奖金池',
          price:99.99,
          bz:'NHR'
        }
      ],
      ppList2:[
        {
          id:21,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'集齐36天罡兑换24%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:22,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'集齐36天罡兑换24%奖金池',
          price:99.99,
          bz:'NHR'
        }
      ],
      ppList3:[
        {
          id:31,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'12个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:32,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'12个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:33,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'12个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        }
      ],
      ppList4:[
        {
          id:41,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'6个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:42,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'6个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:43,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'6个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        },
        {
          id:44,
          bg:require('@/assets/imgs/index/wz_beijing.jpg'),
          title:'6个NFT兑换2.4%奖金池',
          price:99.99,
          bz:'NHR'
        }
      ]
    };
  },
  created() {
    // this.addToList()
  },
  mounted() {
    this.addToList();
  },
  computed: {
    ...mapState(["accountInfo"]),
    tabList() {
      return []
    },
  },
  methods: {
    addToList() {
      let list = [
        {
          id: 1,
          avatar: require('@/assets/imgs/ck_qizhi1.png'),
          msg: "10:18 恭喜 0xcd...9116 獲得 橙色 喬道清",
          time: 8,
          barrageStyle: 'red'
        },
        {
          id: 2,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 9,
          barrageStyle: 'green'
        },
        {
          id: 3,
          avatar: require('@/assets/imgs/ck_qizhi3.png'),
          msg: "10:18 恭喜 0xcd...9116 獲得 橙色 陶宗旺",
          time: 10,
          barrageStyle: 'normal'
        },{
          id: 4,
          avatar: require('@/assets/imgs/ck_qizhi1.png'),
          msg: "10:18 恭喜 0xcd...9116 獲得 橙色 喬道清",
          time: 9,
          barrageStyle: 'red'
        },
        {
          id: 5,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 8,
          barrageStyle: 'green'
        },
        {
          id: 6,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 7,
          barrageStyle: 'green'
        },
        {
          id: 7,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 10,
          barrageStyle: 'green'
        },
        {
          id: 8,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 8,
          barrageStyle: 'green'
        },
        {
          id: 9,
          avatar: require('@/assets/imgs/ck_qizhi2.png'),
          msg: "10:18 恭喜 0x46...0a64 獲得 橙色 張青",
          time: 9,
          barrageStyle: 'green'
        }
      ];
      list.forEach((v) => {
        this.barrageList.push({
          id: v.id,
          avatar: v.avatar,
          msg: v.msg,
          time: v.time,
          type: MESSAGE_TYPE.NORMAL,
          barrageStyle: v.barrageStyle
        });
      });
    },
    closePpList(){
      const vm = this;
      vm.dialogPpList = false
    },
  },
}
</script>
<style lang="scss" type="text/scss" scoped>
.tm-par {
  //height: 200px;
  position: relative;
  .prize-p{
    padding-top: 220px;
  }
  .pp-list{
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 20px 0;
    .pp-list-item{
      background-image: url('~assets/imgs/index/wz_beijing.jpg');
      background-size: cover;
      background-position: inherit;
      width: 320px;
      height: 150px;
      border-radius: 10px;
      position: relative;
      margin: 0 10px;
      h1{
        position: absolute;
        bottom: 40px;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 20px;
        font-weight: bold;
      }
      p{
        position: absolute;
        bottom: 10px;
        width: 100%;
        text-align: center;
        color: #fff;
        font-size: 16px;
      }
    }
  }
}
</style>
